<template>
    <div class="content">
        <upNavbar :title="t('NotificationCenter')" :bgColor="'#F2E8E7'"></upNavbar>
        <div style="height: 2.6rem"></div>
        <div class="topSelector">
            <!-- <u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list1"
                itemStyle="padding-left: 1px; padding-right: 1px; height: 58rpx;" @click="tabsClick"></u-tabs> -->
            <up-grid :border="false" col="5">
                <up-grid-item v-for="(listItem, listIndex) in list" :key="listIndex"
                    @click="gridClick(listItem, listIndex)">
                    <div class="imgAndBadge">
                        <image :src="listItem.img" :style="{
                            filter: tabsItem === listIndex ? getColorShadow(listIndex) : 'none'
                        }"></image>
                        <u-badge :isDot="true" :show="listItem.showd" bgColor="#E0939B" max="99" :absolute="true"
                            :offset="['0', '0']"></u-badge>
                    </div>
                    <text class="grid-text" :style="{
                        color: tabsItem === listIndex ? '#ffffff' : '#4F4F4F',
                        textShadow: tabsItem === listIndex ? getTextShadow(listIndex) : 'none'
                    }">{{
                        listItem.text
                        }}</text>
                </up-grid-item>
            </up-grid>
        </div>
        <div class="contentBox">
            <up-list @scrolltolower="getFashionplay(tabsData)" v-if="tabsData === t('praise')">
                <div class="listBox">
                    <!-- <up-list-item v-for="(item, index) in indexList" :key="index">
                        <up-cell @click="shezhiBtn(item)">
                            <template #icon>
                                <div class="img" @click.stop="avatarBtn($event, item)">
                                    <image :src="item.likes_avatar_sign" alt="" />
                                </div>
                            </template>
<template #title>
                                <span class="userName">{{ item.likes_name }}</span>
                                <span class="userText">{{ item.funpaly_title }}
                                    <image class="smallIcon" src="@/static/images/xinxin2.png"></image>
                                </span>
                                <span class="userText" v-if="item.isShow == 1">{{ `对《${funpaly_title}》点了一个喜欢` }}<image
                                            class="smallIcon" src="@/static/images/xinxin2.png"></image></span>
                                    <span class="userText" v-else-if="item.isShow == 2">{{ `回复了你的评论` }}<image
                                            class="smallIcon" src="@/static/images/pinglun.png"></image></span>
                                    <span class="userText" v-else-if="item.isShow == 3">{{ `对《${funpaly_title}》新增了一条评论` }}
                                        <image class="smallIcon" src="@/static/images/pinglun.png"></image>
                                    </span>
                                    <span class="userText" v-else-if="item.isShow == 4">{{ `对你的评论点了一个踩` }}<image
                                            class="smallIcon" src="@/static/images/cai.png"></image></span>
                                    <span class="userText" v-else-if="item.isShow == 5">{{ `关注了你` }}<image
                                            class="smallIcon" src="@/static/images/guanzhu.png"></image></span>
                                    <span class="userText" v-else-if="item.isShow == 6">{{ `对你取消了关注` }}<image
                                            class="smallIcon" src="@/static/images/quguan.png"></image></span>
                                    <span class="userText" v-else>{{ item.isShow }}</span>
                            </template>
<template #right-icon>
                                <span class="gzBtn">
                                    <span class="timeText">{{ dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss')
                                    }}</span>
                                    <up-button type="error" size="mini"
                                        @click.stop="handleButtonClick($event, item, index)">
                                        删除
                                    </up-button>
                                </span>
                            </template>
</up-cell>
</up-list-item> -->
                    <u-swipe-action v-if="indexList.length > 0">
                        <u-swipe-action-item v-for="(item, index) in indexList" :key="index"
                            @click="handleButtonClick($event, item, index)" :options="rightOptions">
                            <up-cell @click="shezhiBtn(item, 1)">
                                <template #icon>
                                    <div class="img" @click.stop="avatarBtn($event, item, 1)">
                                        <image :src="item.likes_avatar_sign" alt="" />
                                    </div>
                                </template>
                                <template #title>
                                    <span class="userName">{{ item.likes_name }}</span>
                                    <span class="userText">{{ $t('for') }}<span class="fontWeight">《
                                            <span class="titleText">{{
                                                item.funpaly_title
                                                }}</span>》</span>{{ $t('orderedalike') }}
                                        <image class="smallIcon" src="@/static/images/xinxin2.png"></image>
                                    </span>
                                </template>
                                <template #right-icon>
                                    <span class="gzBtn">
                                        <span class="timeText">{{ formatTimeAgo(item.create_time)
                                            }}</span>
                                    </span>
                                </template>
                            </up-cell>
                        </u-swipe-action-item>
                    </u-swipe-action>
                    <span class="noMsg" v-else>{{ $t('nonews') }}</span>
                </div>
            </up-list>
            <up-list @scrolltolower="getFashionplay2(tabsData)" v-if="tabsData === t('Commentsand', { msg: '@' })">
                <div class="listBox">
                    <!-- <up-list-item v-for="(item, index) in indexList2" :key="index">
                        <up-cell @click="shezhiBtn(item)">
                            <template #icon>
                                <div class="img" @click.stop="avatarBtn($event, item)">
                                    <image :src="item.likes_avatar_sign" alt="" />
                                </div>
                            </template>
                            <template #title>
                                <span class="userName">{{ item.likes_name }}</span>
                                <span class="userText">{{ item.funpaly_title }}
                                    <image class="smallIcon" src="@/static/images/xinxin2.png"></image>
                                </span>
                            </template>
                            <template #right-icon>
                                <span class="gzBtn">
                                    <span class="timeText">{{ dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss')
                                    }}</span>
                                    <up-button type="error" size="mini"
                                        @click.stop="handleButtonClick2($event, item, index)">
                                        删除
                                    </up-button>
                                </span>
                            </template>
                        </up-cell>
                    </up-list-item> -->

                    <u-swipe-action v-if="indexList2.length > 0">
                        <u-swipe-action-item v-for="(item, index) in indexList2" :key="index"
                            @click="handleButtonClick2($event, item, index)" :options="rightOptions">
                            <up-cell @click="shezhiBtn(item, 2)">
                                <template #icon>
                                    <div class="img" @click.stop="avatarBtn($event, item, 2)">
                                        <image :src="item.comment_avatar_sign" alt="" />
                                    </div>
                                </template>
                                <template #title>
                                    <span class="userName">{{ item.user_name }}</span>
                                    <!-- <span class="userText">{{ $t('respondedtoyourcomment') }}
                                        <image class="smallIcon" src="@/static/images/pinglun.png"></image>
                                    </span> -->
                                    <span class="userText">{{ $t('for') }}<span class="fontWeight">《<span
                                                class="titleText">{{
                                                    item.funplay_title }}</span>》</span>{{
                                                    $t('Addedacomment') }}
                                        <image class="smallIcon" src="@/static/images/pinglun.png"></image>
                                    </span>
                                </template>
                                <template #right-icon>
                                    <span class="gzBtn">
                                        <span class="timeText">{{ formatTimeAgo(item.create_time)
                                        }}</span>
                                    </span>
                                </template>
                            </up-cell>
                        </u-swipe-action-item>
                    </u-swipe-action>
                    <span class="noMsg" v-else>{{ $t('nonews') }}</span>
                </div>
            </up-list>
            <up-list @scrolltolower="getFashionplay3(tabsData)" v-if="tabsData === t('personsofconcern')">
                <div class="listBox">
                    <!-- <up-list-item v-for="(item, index) in indexList3" :key="index">
                        <up-cell @click="shezhiBtn(item)">
                            <template #icon>
                                <div class="img" @click.stop="avatarBtn($event, item)">
                                    <image :src="item.follow_avatar_sign" alt="" />
                                </div>
                            </template>
                            <template #title>
                                <span class="userName">{{ item.follow_name }}</span>
                                <span class="userText">{{ `关注了你` }}<image class="smallIcon"
                                        src="@/static/images/guanzhu.png"></image>
                                </span>
                            </template>
                            <template #right-icon>
                                <span class="gzBtn">
                                    <span class="timeText">{{ item.create_time }}</span>
                                    <up-button type="error" size="mini"
                                        @click.stop="handleButtonClick3($event, item, index)">
                                        删除
                                    </up-button>
                                </span>
                            </template>
                        </up-cell>
                    </up-list-item> -->

                    <u-swipe-action v-if="indexList3.length > 0">
                        <u-swipe-action-item v-for="(item, index) in indexList3" :key="index"
                            @click="handleButtonClick3($event, item, index)" :options="rightOptions">
                            <up-cell @click="shezhiBtn(item, 3)">
                                <template #icon>
                                    <div class="img" @click.stop="avatarBtn($event, item, 3)">
                                        <image :src="item.follow_avatar_sign" alt="" />
                                    </div>
                                </template>
                                <template #title>
                                    <span class="userName">{{ item.follow_name }}</span>
                                    <span class="userText">{{ $t('followyou') }}
                                        <image class="smallIcon" src="@/static/images/guanzhu.png"></image>
                                    </span>
                                </template>
                                <template #right-icon>
                                    <span class="gzBtn">
                                        <!-- <span class="timeText">{{ dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss')
                                            }}</span> -->
                                        <span class="timeText">{{ formatTimeAgo(item.create_time) }}</span>
                                    </span>
                                </template>
                            </up-cell>
                        </u-swipe-action-item>
                    </u-swipe-action>
                    <span class="noMsg" v-else>{{ $t('nonews') }}</span>
                </div>
            </up-list>
            <up-list @scrolltolower="getFashionplay4(tabsData)" v-if="tabsData === t('officialnews')">
                <div class="listBox" v-if="indexList4.length > 0">
                    <up-list-item v-for="(item, index) in indexList4" :key="index">
                        <up-cell>
                            <template #icon>
                                <!-- @click.stop="avatarBtn($event, item)" -->
                                <div class="img">
                                    <!-- <image :src="item.official_avatar_sign" alt="" /> -->
                                    <image src="@/static/logo/dpl.png" alt="" />
                                </div>
                            </template>
                            <template #title>
                                <span class="userName2">{{ item.user_name }}</span>
                                <span class="userText">{{ item.official_content }}</span>
                                <span class="dateTimeData">{{ formatTimeAgo(item.create_time) }}</span>
                            </template>
                        </up-cell>
                    </up-list-item>
                </div>
                <span class="noMsg" v-else>{{ $t('nonews') }}</span>
            </up-list>
            <up-list @scrolltolower="getFashionplay5(tabsData)" v-if="tabsData === t('systemmessage')">
                <div class="listBox" v-if="indexList5.length > 0">
                    <up-list-item v-for="(item, index) in indexList5" :key="index">
                        <up-cell>
                            <template #icon>
                                <!-- @click.stop="avatarBtn($event, item)" -->
                                <div class="img">
                                    <image src="@/static/images/dasheng.png" alt="" />
                                </div>
                            </template>
                            <template #title>
                                <span class="userName2">大漂亮娃圈守卫</span>
                                <span class="userText">{{ item.report_content }}</span>
                                <!-- <span class="userText">您于{{ item.report_content }} 对《{{ 1
                                }}》的举报，我们根据现有证据和平台规则，暂未发现明确违规行为我们已记录您的反馈，并将持续关注该用户/内容。
                                    感谢您协助维护大漂亮潮玩的良好环境！</span>
                                <span class="userText">您发布的《{{ item.report_content }}》因涉及违规账号受到处罚，处罚措施为禁止内容、评论发布处罚
                                    处罚到期时间{{ 1 }}
                                    请遵守大漂亮娃圈规则！多次违规将导致账号封禁。</span>
                                <span class="userText">您于{{ item.report_content }} 对《{{ 1
                                }}》的举报，我们根据现有证据和平台规则，已对该内容进行下架处理，并对内容用户进行处罚。
                                    请遵守大漂亮娃圈规则！多次违规将导致账号封禁。</span> -->
                                <span class="dateTimeData">{{ formatTimeAgo(item.seend_time) }}</span>
                            </template>
                        </up-cell>
                    </up-list-item>
                </div>
                <span class="noMsg" v-else>{{ $t('nonews') }}</span>
            </up-list>
        </div>
        <div class="closedbtn" v-if="showDleAllBtn" @click="delAll">
            <u-icon name="close"></u-icon>
            <span>{{ $t('all') }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onPullDownRefresh, } from '@dcloudio/uni-app'
import upNavbar from '../../components/upNavbar.vue'
import { noticeFollow, noticeLikes, noticeComment, official, report } from '@/api/index/index'
import { useI18n } from 'vue-i18n'
import { formatTimeAgo } from "@/utils/timeUtils.js"
const { t } = useI18n()
// const list1 = reactive([{ name: '互动消息' }, { name: t('officialnews') },])
const userCode = ref(uni.getStorageSync('userCode'))
const tabsData = ref(t('praise'))
const tabsItem = ref(0)
const page = ref(1)
const page2 = ref(1)
let showDleAllBtn = ref(true)
let indexList = ref([]);
const rightOptions = ref([
    {
        text: '删除',
        style: {
            backgroundColor: '#ff4d4f',
            color: '#fff'
        }
    }
]);
let indexList2 = ref([]);
let indexList3 = ref([])
let indexList4 = ref([])
let indexList5 = ref([])
let list = ref([
    { text: t('praise'), img: '/static/images/likeList.png', showd: false },
    { text: t('Commentsand'), img: '/static/images/plha.png', showd: false },
    { text: t('personsofconcern'), img: '/static/images/gzdr.png', showd: false },
    { text: t('officialnews'), img: '/static/images/gfxx.png', showd: false },
    { text: t('systemmessage'), img: '/static/images/xtxx.png', showd: false },
]);
const shadowColors = ref([// 定义每个宫格的文字阴影颜色
    '1px 1px 2px #E13B5B',
    '1px 1px 2px #78B3D4',
    '1px 1px 2px #AAD8B0',
    '1px 1px 2px #C75C5C',
    '1px 1px 2px #4A65D6'
])
const shadowStyles = ref([
    'drop-shadow(1px 1px 2px #E13B5B)',
    'drop-shadow(1px 1px 2px #78B3D4)',
    'drop-shadow(1px 1px 2px #AAD8B0)',
    'drop-shadow(1px 1px 2px #C75C5C)',
    'drop-shadow(1px 1px 2px #4A65D6)'
])
const getTextShadow = (index) => {// 设置阴影颜色
    return shadowColors.value[index];
}
const getColorShadow = (index) => {// 设置阴影颜色
    return shadowStyles.value[index];
}
const gridClick = (item: object, index: number) => {
    tabsData.value = item.text;
    tabsItem.value = index;
    showDleAllBtn.value = true;
    if (index === 0) {
        getnoticeLikes(item)
    } else if (index === 1) {
        getnoticeComment(item)
    } else if (index === 2) {
        getnoticeFollow(item)
    } else if (index === 3) {
        showDleAllBtn.value = false;
        getofficial()
    } else if (index === 4) {
        getreport(item)
    }
}
// 左滑删除按钮
const handleButtonClick = (event: any, item: any, index: number) => {
    // console.log(item, index);
    uni.showModal({
        title: '提示',
        content: '确定要删除这条数据吗？',
        success: (res) => {
            if (res.confirm) {
                // 从列表中移除对应的数据
                indexList.value.splice(index, 1);
                // 重新缓存
                // #ifndef H5
                let listData = JSON.stringify(indexList.value)
                plus.storage.setItem('noticeLikes' + userCode.value, listData)
                // #endif
                uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                });
            }
        }
    });
}
const handleButtonClick2 = (event: any, item: any, index: number) => {
    // event.stopPropagation(); // 阻止事件冒泡
    uni.showModal({
        title: '提示',
        content: '确定要删除这条数据吗？',
        success: (res) => {
            if (res.confirm) {
                // 从列表中移除对应的数据
                indexList2.value.splice(index, 1);
                // 重新缓存
                // #ifndef H5
                let listData = JSON.stringify(indexList2.value)
                plus.storage.setItem('noticeComment' + userCode.value, listData)
                // #endif
                uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                });
            }
        }
    });
}
const handleButtonClick3 = (event: any, item: any, index: number) => {
    // event.stopPropagation(); // 阻止事件冒泡
    uni.showModal({
        title: '提示',
        content: '确定要删除这条数据吗？',
        success: (res) => {
            if (res.confirm) {
                // 从列表中移除对应的数据
                indexList3.value.splice(index, 1);
                // 重新缓存
                // #ifndef H5
                let listData = JSON.stringify(indexList3.value)
                plus.storage.setItem('noticeFollow' + userCode.value, listData)
                // #endif
                uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                });
            }
        }
    });
}
const tabsClick = (item: any) => {
    tabsData.value = item.name;
}
const getFashionplay = (text: string, index: number) => {// 上拉触底
    console.log('text', text)
    page.value++
    if (index == 1) {
        page.value = 1
        indexList.value = []

    }
}
const getFashionplay2 = (text: string, index: number) => {// 上拉触底
    console.log('text', text)
    page2.value++
    if (index == 1) {
        page2.value = 1
        indexList2.value = []
    }
}
const getFashionplay3 = (text: string, index: number) => {// 上拉触底
    console.log('text', text)
}
const getFashionplay4 = (text: string, index: number) => {// 上拉触底
    console.log('text', text)
}
const getFashionplay5 = (text: string, index: number) => {// 上拉触底
    console.log('text', text)
}

// 列表点击
const shezhiBtn = (item: any, index: number) => {
    // console.log('hhhhhhhhhh', index, item);
    if (index == 3) {
        uni.navigateTo({
            url: '/pages/me/userHomepage?' + 'data=' + item.follow_code,
        })
    } else if (index == 2) {
        uni.navigateTo({
            url: `/pages/advertisements/articleDetails?forget=${t('comments')}&data=${item.funplay_code}`,
        })
    } else if (index == 1) {
        uni.navigateTo({
            url: `/pages/advertisements/articleDetails?data=${item.funpaly_code}`
        })
    }
}
const avatarBtn = (event: any, item: object, index: number) => {// 头像点击
    event.stopPropagation(); // 阻止事件冒泡
    console.log('item', item);

    if (index == 1) {
        uni.navigateTo({
            url: '/pages/me/userHomepage?' + 'data=' + item.likes_code,
        })
    } else if (index == 2) {
        uni.navigateTo({
            url: '/pages/me/userHomepage?' + 'data=' + item.comment_code,
        })
    } else if (index == 3) {
        uni.navigateTo({
            url: '/pages/me/userHomepage?' + 'data=' + item.follow_code,
        })
    }
}
// 删除全部
const delAll = () => {
    if (tabsData.value == t('praise')) {
        indexList.value = []
        plus.storage.removeItem('noticeLikes' + userCode.value)
    } else if (tabsData.value == t('Commentsand', { msg: '@' })) {
        indexList2.value = []
        plus.storage.removeItem('noticeComment' + userCode.value)
    } else if (tabsData.value == t('personsofconcern')) {
        indexList3.value = []
        plus.storage.removeItem('noticeFollow' + userCode.value)
    } else if (tabsData.value == t('officialnews')) {
        indexList4.value = []
    } else if (tabsData.value == t('systemmessage')) {
        indexList5.value = []
        plus.storage.removeItem('xtreport' + userCode.value)
    }
}
//获取点赞消息通知
const getnoticeLikes = (item: object) => {
    noticeLikes().then((res: object) => {
        if (res.code == 200) {
            // #ifndef H5
            const optionsData = plus.storage.getItem('noticeLikes' + userCode.value)
            if (optionsData) {
                let zjData = JSON.parse(optionsData)
                // 计算当前时间
                const now = new Date()
                // 保留90日内的数据
                const ninetyDaysAgo = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000)
                zjData = zjData.filter(item => {
                    const itemDate = new Date(item.create_time)
                    return itemDate >= ninetyDaysAgo
                })
                indexList.value = [...zjData]
            }
            indexList.value.unshift(...res.data)
            let listData = JSON.stringify(indexList.value)
            plus.storage.setItem('noticeLikes' + userCode.value, listData)
            // #endif

            // #ifdef H5
            indexList.value = res.data
            // #endif
            if (item) {
                item.showd = false
            } else {
                list.value[0].showd = false
            }
        } else {
            uni.showToast({
                title: `错误!${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    })
}
//获取评论的通知
const getnoticeComment = (item: object) => {
    noticeComment().then((res: object) => {
        if (res.code == 200) {
            // #ifdef H5
            if (res.data.comment_notice) {
                indexList2.value = res.data.comment_notice
            }
            // #endif
            // #ifndef H5
            const optionsData = plus.storage.getItem('noticeComment' + userCode.value)
            if (optionsData) {
                let zjData = JSON.parse(optionsData)
                // 计算当前时间
                const now = new Date()
                // 保留90日内的数据
                const ninetyDaysAgo = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000)
                zjData = zjData.filter(item => {
                    const itemDate = new Date(item.create_time)
                    return itemDate >= ninetyDaysAgo
                })
                indexList2.value = [...zjData]
            }
            if (res.data.comment_notice) {
                indexList2.value.unshift(...res.data.comment_notice)
            }
            // indexList2.value.forEach((item: object)=>{
            //     item.create_time.seconds
            // })
            let listData = JSON.stringify(indexList2.value)
            plus.storage.setItem('noticeComment' + userCode.value, listData)
            // #endif
            if (item) {
                item.showd = false
            } else {
                list.value[1].showd = false
            }
        } else {
            uni.showToast({
                title: `错误!${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    })
}
//获取关注通知列表
const getnoticeFollow = (item: object) => {
    noticeFollow().then((res: object) => {
        if (res.code == 200) {
            // #ifdef H5
            indexList3.value = res.data
            // #endif
            // #ifndef H5
            const optionsData = plus.storage.getItem('noticeFollow' + userCode.value)
            if (optionsData) {
                let zjData = JSON.parse(optionsData)
                indexList3.value = [...zjData]
            }
            indexList3.value.unshift(...res.data)
            let listData = JSON.stringify(indexList3.value)
            plus.storage.setItem('noticeFollow' + userCode.value, listData)
            // #endif
            if (item) {
                item.showd = false
            } else {
                list.value[2].showd = false
            }
        } else {
            uni.showToast({
                title: `错误!${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    })
}
const getofficial = () => {// 获取官方通告
    official().then((res: object) => {
        if (res.code == 200) {
            indexList4.value = res.data
        } else {
            uni.showToast({
                title: `错误!${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    })
}
const getreport = (item: object) => {// 获取系统消息
    report().then((res: object) => {
        if (res.code == 200) {
            // #ifdef H5
            indexList5.value = res.data
            // #endif
            // #ifndef H5
            const optionsData = plus.storage.getItem('xtreport' + userCode.value)
            if (optionsData) {
                let zjData = JSON.parse(optionsData)
                indexList5.value = [...zjData]
            }
            indexList5.value.unshift(...res.data)
            let listData = JSON.stringify(indexList5.value)
            plus.storage.setItem('xtreport' + userCode.value, listData)
            // #endif
            if (item) {
                item.showd = false
            } else {
                list.value[4].showd = false
            }
        } else {
            uni.showToast({
                title: `错误!${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    })
}
onLoad((options: object) => {
    getnoticeLikes()
    if (options.data) {
        let data = JSON.parse((options.data))
        if (data.likes) {
            list.value[0].showd = true
        }
        if (data.comments) {
            list.value[1].showd = true
        }
        if (data.follows) {
            list.value[2].showd = true
        }
        if (data.time) {
            list.value[3].showd = true
        }
        if (data.is_report) {
            list.value[4].showd = true
        }
    }
})
onPullDownRefresh(() => {// 下拉刷新
    if (tabsItem.value === 0) {
        getnoticeLikes()
    } else if (tabsItem.value === 1) {
        getnoticeComment()
    } else if (tabsItem.value === 2) {
        getnoticeFollow()
    } else if (tabsItem.value === 3) {
        getofficial()
    } else if (tabsItem.value === 4) {
        getreport()
    }
    setTimeout(() => {
        uni.stopPullDownRefresh();// 关闭下来刷新动画效果
    }, 1000);
})
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #F2E8E7, #FDEAE6);

    .topSelector {
        width: 92%;
        margin: 0.5rem auto 0;
        height: 4rem;

        .imgAndBadge {
            position: relative;
            display: inline-block;
        }

        .grid-text {
            font-size: .875rem;
            color: #4F4F4F;
        }

        image {
            width: 2rem;
            height: 2rem;
        }
    }

    .contentBox {
        width: 92%;
        height: calc(100% - 4.5rem - 2.4rem - 0.6rem - 4rem);
        border-radius: 1rem;
        border: 3rpx solid #d1d1d1;
        background-color: #fff;
        margin: 0 auto;
        // 允许滚动
        overflow: auto;

        ::v-deep .u-list {
            width: 100%;
            height: 100% !important;
        }

        .listBox {
            width: 100%;

            ::v-deep .u-cell__body__content {
                align-items: flex-start;
            }

            .img {
                width: 80rpx;
                height: 80rpx;
                float: left;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .userName {
                color: #000;
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                line-clamp: 1;
            }

            .userName2 {
                font-size: 28rpx;
            }

            .userText {
                font-size: 24rpx;
                color: #9A9A9A;
                display: flex;
                align-items: center;
                margin-top: 10rpx;

                .smallIcon {
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 5rpx;
                }

            }

            .dateTimeData {
                text-align: center;
                margin-top: 20rpx;
                margin-right: 3rem;
                color: #9A9A9A;
                font-size: 24rpx;
            }

            .gzBtn {
                .u-button {
                    width: 120rpx;
                }
            }

            .timeText {
                font-size: 24rpx;
                color: #9A9A9A;
            }
        }

        .noMsg {
            width: 100%;
            margin-top: 40rpx;
            display: inline-block;
            text-align: center;
        }
    }

    .closedbtn {
        width: 6.375rem;
        height: 60rpx;
        position: absolute;
        left: 50%;
        bottom: 1.75rem;
        transform: translate(-50%, -50%);
        border: 2rpx solid #9A9A9A;
        border-radius: 25px;
        background-color: #fff;
        color: #9A9A9A;
        text-align: center;

        .u-icon {
            display: inline-block;
        }

        span {
            line-height: 60rpx;
            display: inline-block;
            margin-left: 20rpx;
        }
    }

    .fontWeight {
        font-weight: bold;
        display: -webkit-box;

        .titleText {
            max-width: 5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: auto;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
        }
    }
}
</style>